{extend name="mainadmin@layouts/base" /}
{block name="main" }

<header class="header  b-b clearfix">
     <div class="page-breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="fa fa-ellipsis-v"></i>
                    <strong>微信自定义菜单</strong>
                </li>
            </ul>

       </div>
</header>
<section class="scrollable  wrapper">
      <section class="panel panel-default">
          <section class="scrollable wrapper">
      <div class="alert">
          <p>注意：1级菜单最多只能开启3个，2级子菜单最多开启5个!</p>
          <p>使用自定义菜单,必须在已经保存的基础上进行, 第一步必须先修改保存状态！第二步点击推送!</p>
          <p>当您为自定义菜单填写链接地址时请填写以"http://"开头，这样可以保证用户手机浏览的兼容性更好</p>
          <p>撤销自定义菜单：撤销后，您的微信公众帐号上的自定义菜单将不存在；如果您想继续在微信公众帐号上使用自定义菜单，请点击"推送菜单到微信公众号"按钮，将重新启用！</p>
        </div>
        <section class="panel panel-default ">
         <form action="{:url('save')}" method="post" class="form-horizontal form-validate"  style="padding:0;">
            <table id="listTable" class="table table-bordered table-hover dataTable">
              <thead>
                <tr>
                  <th width="70">顺序</th>
                  <th width="250">主菜单名称</th>
                  <th width="150">响应动作类型</th>
                  <th width="120">绑定操作</th>
                  <th>响应值</th>
                  <th width="70">启用</th>
                  <th width="70">操作</th>
                </tr>
              </thead>
              {volist name="rows" id="vo" }
                {empty name="vo.pid"}
                    {gt name="i" value="1"}</thead>{/gt}
                    <thead id="subMenu_{$vo.id}">
                {/empty}
                <tr id="menus_{$vo.id}" class="{$vo['icon']==''?'ztr':'ptr'}">
                  <td><input type="text" class="input-ssmall" size="3" value="{$vo.sort}" name="ps[{$vo.id}][sort]"   /></td>
                  <td>
                 {if condition="$vo.pid eq 0"}<i class="fa fa-plus cursor_p add" title="添加子菜单" rel="{$vo.id}" style="float:right; padding-right:10px; padding-top:8px;"></i>{/if}
                    {if condition="($vo.icon neq '')"}<i class='board'></i>{/if}
                    <input type="text" class="input-medium" size="15" value="{$vo.name}"  name="ps[{$vo.id}][name]" data-rule-required="true" data-rule-maxlength="30" style="width:150px;" />
                  </td>
                  <td>
                    <select name="ps[{$vo.id}][type]" id="type_{$vo.id}" class="input-small" style="width:150px;" onChange="getKeywordSelect(this,{$vo.id});">
                        <option value="0">--请选择--</option>
                        {$vo.event_select|raw}
                    </select>
                  </td>
                  <td>
                    <input type="hidden" value="{$vo.pid}" name="ps[{$vo.id}][parent_id]"/>
                      <a href="javascript:;" data-remote="{:url('publics/sys_admin.links/index',array('searchType'=>'ps','_menu_index'=>$vo['id']))}" data-toggle="ajaxModal" class="bding_btn_{$vo.id} btn btn-sm btn-default {$vo['type']=='view'?'':'hide'}" id="Url_btn_{$vo.id}" >绑定URL</a>

                      <a href="javascript:;" data-remote="{:url('sys_admin.replyText/searchBox',array('searchType'=>'ps','_menu_index'=>$vo['id']))}" data-toggle="ajaxModal" class="bding_btn_{$vo.id} btn btn-sm btn-default {$vo['type']=='click'?'':'hide'}" id="ReplyText_btn_{$vo.id}">绑定关键字</a>
                  </td>
                  <td><input name="ps[{$vo.id}][keyword_value]" id="keyword_value_{$vo.id}"  style="width:100%" value="{$vo.keyword_value}" type="text" class="input-text " ></td>
                  <td>
                  <label class="m-t">
                  <input class="checkbox-slider colored-orange" name="ps[{$vo.id}][is_show]" type="checkbox" value="1"  {$vo['is_show']==1?'checked':''}>
                  <span class="text"></span>
                  </label>
                  </td>
                  <td><a href="javascript:G.ui.tips.confirm_flag('您确定要删除此菜单吗?', delMenu,'{$vo.id}')" class="fa fa-trash"></a></td>
                </tr>
              {/volist}

            </table>
            <div class="form-group m-t">
              <a href="javascript:void(0)" id="add_menu" class="btn  btn-default m-r" style=" margin-left:20px;"><i class="fa fa-plus m-r-xs"></i>添加主菜单</a>
              <button id="bsubmit" type="submit" data-loading-text="提交中..." class="btn btn-primary">保存</button>
              <button id="create_menu" type="button" class="btn btn-primary fr" style="margin:0px 20px;">(先保存)推送菜单到微信公众号</button>
              <button id="remove_menu" type="button" class="btn fr">撤销自定义菜单</button>

            </div>
          </form>
     </section>
</section>
<script type="text/html" id="menusTpl">
    {literal}
    {{if pid == 0}}
    <thead id="subMenu_{{id}}">
    {{/if}}
    {/literal}
    <tr>
       <td><input name="new[sort][{{id}}]" size="3" type="text" value="0" class="input-ssmall"/></td>
        <td>
            {literal}
            {{if pid == 0}}
            <i class="fa fa-plus cursor_p add" title="添加子菜单" rel="{{id}}" style="float:right; padding-right:10px; padding-top:8px;"></i>
            {{else}}
            <i class="board"></i>
            {{/if}}
            {/literal}
            <input name="new[name][{{id}}]" size="15" type="text" class="input-medium" data-rule-required="true" data-rule-maxlength="30" style="width:150px;" /></td>
        <td>
            <select name="new[type][{{id}}]" id="type_{{id}}" class="input-small" style="width:100%" onChange="getKeywordSelect(this,'{{id}}');">
                <option value="0">--请选择--</option>
                {$WeixinEventType_opt|raw}
                </select>
            </td>
        <td>
            <a href="javascript:;" data-remote="{:_url("publics/sys_admin.links/index",array("searchType"=>"new","_menu_index"=>"[[id]]"))}"  data-toggle="ajaxModal" class="bding_btn_{{id}} btn btn-sm btn-default hide " id="Url_btn_{{id}}">绑定URL</a>
            <a href="javascript:;" data-remote="{:_url("weixin/sys_admin.replyText/searchBox",array("searchType"=>"new","_menu_index"=>"[[id]]"))}" data-toggle="ajaxModal" class="bding_btn_{{id}} btn btn-sm btn-default hide" id="ReplyText_btn_{{id}}">绑定关键字</a>
        </td>
        <td>
            <input name="new[parent_id][{{id}}]" value="{{pid}}" type="hidden"/>
            <input name="new[keyword_value][{{id}}]" id="keyword_value_{{id}}" class="text" type="text" style="width:100%">
            </td>
        <td><label class="m-t"><input class="checkbox-slider colored-orange" name="new[is_show][{{id}}]" type="checkbox" value="1" checked ><span class="text"></span></label></td>
        <td><a href="javascript:void(0)" class="del fa fa-trash" data-id="{{id}}"></a></td>
        </tr>
    {literal}
    {{if pid == 0}}
    </thead>
    {{/if}}
    {/literal}
</script>

<script type="text/javascript">

	   var _menu_index = 0;
        function delMenu(){
            var data = [];
            data.id = $('#cfm_id').val();
            jq_ajax('{:url("delete")}',data,function (res) {
                if (res.code == 0){
                    _alert(res.msg);
                    return;
                }
                if ($('#subMenu_'+data.id).length >0){
                    $('#subMenu_'+data.id).remove();
                }else{
                    $('#menus_'+data.id).remove();
                }
            })
        }
	   // 添加主菜单事件
       $("#add_menu").click(function (e) {
		   e.preventDefault();
           _menu_index++;
		   var data = [];
           data.id = 'new_'+_menu_index;
           data.pid = 0;
           $("#listTable").append(template('menusTpl',data));
	  });

	  // 添加子菜单事件
	  $(document).on('click',"i.add",function() {
		  var $pid = $(this).attr("rel");
		  var count = $("#subMenu_"+$pid).find('tr').length;
          if(count >5){
              _alert('最多只允许添加5个子菜单');
              return;
          }
		  _menu_index++;
          var data = [];
          data.id = 'new_'+_menu_index;
          data.pid = $pid;
          $("#subMenu_"+$pid).append(template('menusTpl',data));

	  });

	  $("#listTable").on("click",'.del', (function () {
	      if ($('#subMenu_'+$(this).data('id')).length >0){
              $('#subMenu_'+$(this).data('id')).remove();
          }else{
              $(this).parents("tr").remove();
          }
	  }));

	  $("input.type").on("change", function () {
		  var $this = $(this);
		  var $val = $this.val();
		  var $nex = $this.nextAll("input.key_type");
		  var re = /[a-zA-z]+:\/\/[^\s]*/i;
		  if (re.test($val)) { $nex.val(2) } else { $nex.val(1) };
	  });

	  $("#create_menu").click(function () {
		  $.post("{:url('push')}",{ },function(res){
			  _alert(res.msg);
		  },'json');
	  });

	  $("#remove_menu").click(function () {
		  G.ui.tips.confirm_flag('撤销后微信公众号中不再显示自定义菜单，确定要撤销吗？',function(){
			  $.post("{:url('remove')}",{ },function(res){
				  $.fallr('hide');
				  _alert(res.msg);
			  },'json');
		  });
	  });

 function getKeywordSelect(obj,id){
	 $("#keyword_value_"+id).val('');
	 $(".bding_btn_"+id).addClass('hide');
	 if(obj.value == 'view'){
	   $("#keyword_value_"+id).val('http://');
       $("#Url_btn_"+id).removeClass('hide');
	 }else if(obj.value == 'click'){
	   $("#ReplyText_btn_"+id).removeClass('hide');
	 }
	 //$(".modal-dialog .close").trigger("click");
 }
  function assigBack(type,type_id,id,title){
       $("#keyword_value_"+type_id).val(title);
       $("#keyword_"+type_id).val(id);
       $(".modal-dialog .close").trigger("click");
  }
var McMore = {
    selectUrlCallback: function assigBack(url,type,type_id) {
       $("#keyword_value_"+type_id).val(url);
       $(".modal-dialog .close").trigger("click");
   }
 }
</script>
{/block}
{block name="footer" }

{/block}